<template>
  <view class="mt20" @click.stop="''" v-if="item.IsVideo === 0">
    <view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
      <image class="simg oneImg" :src="JSON.parse(item.Images)[0] + ossWatermark" mode="widthFix"
        @click.stop="lookimg(item.Images, 0)" />
    </view>
    <view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
      <view class="two-one" @click.stop="lookimg(item.Images, 0)">
        <image class="simg" :src="JSON.parse(item.Images)[0] + ossWatermark
          " mode="aspectFill" />
      </view>
      <view class="two-two">
        <image class="simg" :src="JSON.parse(item.Images)[1] + ossWatermark" mode="aspectFill"
          @click.stop="lookimg(item.Images, 1)" />
      </view>
    </view>
    <view class="three" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 3">
      <view class="three-one" @click.stop="lookimg(item.Images, 0)">
        <image class="simg" :src="JSON.parse(item.Images)[0] + ossWatermark" mode="aspectFill" />
      </view>
      <view class="three-two">
        <image class="simg" :src="JSON.parse(item.Images)[1] + ossWatermark" mode="aspectFill"
          @click.stop="lookimg(item.Images, 1)" />
        <image class="simg" :src="JSON.parse(item.Images)[2] + ossWatermark" mode="aspectFill"
          @click.stop="lookimg(item.Images, 2)" />
      </view>
    </view>
    <view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
      <view class="four-one">
        <view class="four-one-one" @click.stop="lookimg(item.Images, 0)">
          <image class="simg" :src="JSON.parse(item.Images)[0] + ossWatermark" mode="aspectFill" />
        </view>
        <view class="four-one-two" @click.stop="lookimg(item.Images, 1)">
          <image class="simg" :src="JSON.parse(item.Images)[1] + ossWatermark" mode="aspectFill" />
        </view>
      </view>
      <view class="four-two">
        <view class="four-two-one" @click.stop="lookimg(item.Images, 2)">
          <image class="simg" :src="JSON.parse(item.Images)[2] + ossWatermark" mode="aspectFill" />
        </view>
        <view class="four-two-two" @click.stop="lookimg(item.Images, 3)">
          <image class="simg" :src="JSON.parse(item.Images)[3] + ossWatermark" mode="aspectFill" />
        </view>
      </view>
    </view>
    <view class="five" v-else>
      <view class="five-one" v-for="(imgs, index) in JSON.parse(item.Images)" :key="index">
        <image @click.stop="lookimg(item.Images, index)" :src="imgs + ossWatermark" mode="aspectFill" />
      </view>
    </view>
  </view>
  <view class="video_box" v-else @click.stop="">
    <video  style="position: relative;" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
      '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
      ">
      <!-- <cover-view style="width: 100%;height: 100%;background-color: #fff;position: absolute;left: 0;z-index: -1;"></cover-view> -->
      </video>
  </view>
</template>

<script>
export default {

  props: {
    item: {
      default: {},
      typeof: Object
    },
    ossWatermark:{
      default:'',
      typeof: String
    }

  },
  data() {
    return {
      
    };
  },
  onLoad() {
    
  },
  methods: {
    lookimg(url, index) {
      let arr = JSON.parse(url);
      arr = arr.map(item => item + this.ossWatermark)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
  },
  created() {

  },
}
</script>
<style lang='scss'>
.mt20 {
  margin-top: 20rpx;

  .simg {
    display: block;
    //smax-height: 750rpx;
  }

  .one {
    display: flex;
    width: 100%;
    max-height: 800rpx;
    overflow: hidden;
    //height: 400rpx;

    // image {
    //   width: 70%;
    // }
    .oneImg {
      max-width: 70%;
    }
  }

  .two {
    display: flex;

    .two-one {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two-two {
      width: 200rpx;
      height: 200rpx;
      margin-left: 6rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .three {
    display: flex;

    .three-one {
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .three-two {
      display: flex;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-left: 6rpx;
      }
    }
  }

  .four {
    display: flex;
    flex-direction: column;

    .four-one {
      display: flex;

      .four-one-one {
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .four-one-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }

    .four-two {
      display: flex;
      margin-top: 6rpx;

      .four-two-one {
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .four-two-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }
  }

  .five {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .five-one {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 8rpx;
      margin-right: 4rpx;
      margin-left: 4rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.video_box {
  height: 500rpx;
  position: relative;
  z-index: 2;

  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
}
</style>